<template>
  <div>
    <h1>滨海校区学生管理系统</h1>
    <div>
      <input v-model="studentId" placeholder="请输入学号">
      <button @click="fetchStudent">搜索</button>
    </div>
    <div v-if="student">
      <p>学生信息:</p>
      <ul>
        <li>学号: {{ student.id }}</li>
        <li>姓名: {{ student.name }}</li>
        <li>年龄: {{ student.age }}</li>
        <li>专业: {{ student.major }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studentId: '',
      student: null
    };
  },
  methods: {
    fetchStudent() {
      // 当用户输入学号123456时，显示固定的学生信息
      if (this.studentId === '123456') {
        this.student = {
          id: '123456',
          name: '小明',
          age: 18,
          major: '计算机科学'
        };
      } else {
        this.student = null;
        alert('未找到学生信息，请输入正确的学号。');
      }
    }
  }
}
</script>

<style>
/* 这里添加一些基本的样式 */
div {
  margin: 20px;
}

input[type="text"] {
  margin-right: 10px;
}

button {
  cursor: pointer;
}
</style>


